<template>
  <!-- el-breadcrumb 是容器 -->
  <el-breadcrumb separator="/" style="margin-bottom: 20px">
    <!-- 要循环生成哪个元素，就在这个元素上，添加 v-for 指令 -->
    <!-- v-for 指令的语法格式  v-for="(当前循环项, 索引) in 数组" -->
    <el-breadcrumb-item v-for="(item, index) in breads">
      <!-- 按需渲染 a 链接或 span 元素 -->
      <!-- 如果当前循环项是最后一个元素，则要渲染成 span，否则就渲染成 a 链接 -->
      <a :href="item.path" v-if="index !== breads.length - 1">{{ item.metaName }}</a>
      <span v-else>{{ item.metaName }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

// 获取路由的导航信息对象
const route = useRoute()

// 定义计算属性
const breads = computed(() => {
  const newArr = route.matched.map((item) => {
    return {
      path: item.path,
      metaName: item.meta.name
    }
  })
  return newArr
})
</script>
